
<template>
  <div>
    <div class="code">
      <img src="../assets/img/weixin.png" />
      <div class="code_stick">异地接地棒</div>
      <div class="code_time">使用时间:2022/03/28 14:29:39</div>
      <div class="code_place">当前地点:杭州市萧山路皓月路100号</div>
    </div>
    <!-- 查看工作票 -->
    <div class="pop" v-show="gsh">
      <div class="pop_lucenty"></div>
      <div class="popup">
        <div class="work">
          <a class="work_a"></a><span class="work_text">工作票信息</span>
        </div>
        <div class="unit">
          <div class="unit_tr">
            <div class="unit_td">
              单位名称:<span class="unit_td1">杭州旦电科技有限公司</span>
            </div>
          </div>
          <div class="unit_tr">
            <div class="unit_td">
              编号:<span class="unit_td1">HZ1780564987</span>
            </div>
          </div>
          <div class="unit_tr">
            <div class="unit_td">
              工作监督员:<span class="unit_td1">王亮</span>
            </div>
          </div>
          <div class="unit_tr">
            <div class="unit_td">
              工作人员:<span class="unit_td1">李小强</span>
            </div>
          </div>
          <div class="unit_tr">
            <div class="unit_td5">工作内容:</div>
            <div class="unit_td2">
              <span class="gsha">工作内容为接地线设备悬挂</span>
            </div>
          </div>
        </div>
        <div @click="down">
          <img src="../assets/img/down.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 检测报告 -->
    <div class="jiance" v-show="gjha">
      <div class="baogao"></div>
      <div class="report">
        <img src="../assets/img/detection.png" alt="" />
      </div>
      <div class="image" @click="ksjk">
        <img src="../assets/img/down.png" alt="" />
      </div>
    </div>

    <!-- 表格 -->
    <div class="history-table-wrap">
      <div class="state">当前环境状态</div>
      <table class="table">
        <tr class="tr">
          <td class="td td1">湿度</td>
          <td class="td td2">24°c</td>
        </tr>
        <tr class="tr">
          <td class="td td1">湿度</td>
          <td class="td td2">65%</td>
        </tr>
        <tr class="tr">
          <td class="td td1 td3">摆力</td>
          <td class="td td2 td3">风力</td>
        </tr>
      </table>
      <div class="state">出入库信息</div>
      <table class="table">
        <tr class="tr">
          <td class="td td1">出库日期</td>
          <td class="td td2">2023/3/29 13:36:46</td>
        </tr>
        <tr class="tr">
          <td class="td td1">使用人/组织</td>
          <td class="td td2">王小强</td>
        </tr>
        <tr class="tr">
          <td class="td td1">工作票</td>
          <td class="td td2 td5" @click="work">点击查看工作票</td>
        </tr>
        <tr class="tr">
          <td class="td td1 td3">仓储数量</td>
          <td class="td td2 td3 td6">
            10
            <img src="../assets/img/increase.png" alt="" />
          </td>
        </tr>
      </table>
      <div class="state">设置基本信息</div>
      <table class="table">
        <tr class="tr">
          <td class="td td1">出厂日期</td>
          <td class="td td2">2021/5/23</td>
        </tr>
        <tr class="tr">
          <td class="td td1">出厂厂家</td>
          <td class="td td2">杭州旦电科技有限公司</td>
        </tr>
        <tr class="tr">
          <td class="td td1">检测机构</td>
          <td class="td td2">电力安全工具检测中心</td>
        </tr>
        <tr class="tr">
          <td class="td td1">检测报告</td>
          <td class="td td2 td5" @click="okoj">点击查看检测报告</td>
        </tr>
        <tr class="tr">
          <td class="td td1">检测时间</td>
          <td class="td td2">2021/5/30</td>
        </tr>
        <tr class="tr">
          <td class="td td1 td3">安全使用时间</td>
          <td class="td td2 td3">2021/5/23-2022/5/3</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      gsh: false, //工作票
      gjha: false,
    };
  },
  computed: {},
  watch: {},

  methods: {
    work() {
      this.gsh = true;
    },
    down() {
      this.gsh = false;
    },
    ksjk() {
      this.gjha = false;
    },
    okoj() {
      this.gjha = true;
    },
  },
  created() {},
  mounted() {},
  components: {
    // BaiduMap,
  },
};
</script>


<style>
body {
  background: #fafafa;
  margin: 0;
  padding: 0;
}
.code {
  width: 90%;
  height: 100px;
  background: #fff;
  margin: auto;
  margin-top: 10px;
  position: relative;
}
.code img {
  width: 80px;
  height: 80px;
  padding-top: 10px;
  padding-left: 10px;
}
.code_stick {
  position: absolute;
  top: 18px;
  left: 99px;
  font-size: 16px;
  font-weight: 550;
}
.code_time {
  position: absolute;
  top: 47px;
  left: 99px;
  font-size: 14px;
}
.code_place {
  position: absolute;
  top: 67px;
  left: 99px;
  font-size: 14px;
}
/* 表格布局 */
.history-table-wrap {
  width: 90%;
  height: 100%;
  background: #fff;
  margin: auto;
  margin-top: 10px;
}
.history-table-wrap .state {
  padding-top: 10px;
  padding-left: 20px;
  font-weight: 550;
}
.table {
  width: 90%;
  text-align: center;
  margin: auto;
  margin-top: 20px;
}
.tr {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}
.tr .td1 {
  font-size: 15px;
  width: 90%;
  height: 35px;
  line-height: 35px;
  background: #f7f7f7;
  border-right: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
}
.td2 {
  background: #fff;
  height: 35px;
  line-height: 35px;
  width: 90%;
  font-size: 12px;
  color: #666666;
}
.td3 {
  border-bottom: 1px solid #e6e6e6;
}
.td5 {
  color: #ff9922;
  text-decoration: underline;
}
.td6 img {
  width: 10px;
  height: 13px;
  margin-left: 2px;
}
/* 弹框 */
.pop {
  width: 100%;
  height: 3000px;
  /* background: #ccc; */
  position: fixed;
  z-index: 9999;
  margin-top: -500px;
}
.popup {
  width: 70%;
  height: 445px;
  background: #fff;
  margin: auto;
  position: fixed;
  top: 90px;
  left: 15%;
}
.work {
  width: 90%;
  height: 60px;
  line-height: 60px;
  background: #fff;
  padding-left: 20px;
  font-weight: 550;
}
.work .work_text {
}

.unit {
  width: 90%;
  height: 380px;
  background: #fff;
  margin: auto;
  position: relative;
}
.unit_tr {
  height: 50px;
  width: 100%;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
}
.unit_tr .unit_td {
  color: #333;
  font-size: 16px;
}
.unit_tr .unit_td1 {
  color: #959595;
  font-size: 13px;
  position: absolute;
  right: 0;
}
.unit_td2 {
  height: 100px;
  width: 100%;
  border: 1px solid #ccc;
}
.unit_td2 .gsha {
  margin-left: 10px;
  font-size: 15px;
}
.popup img {
  width: 50px;
  height: 130px;
  /* background: #333; */
  position: absolute;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}
.pop_lucenty {
  width: 100%;
  height: 100%;
  background: #333;
  opacity: 0.5;
}
.report img {
  width: 70%;
  height: 400px;
  position: absolute;
  top: 103px;
  margin-left: 15%;
}
.image img {
  width: 50px;
  height: 130px;
  position: absolute;
  top: 500px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  /* background: #333; */
}
.jiance {
  width: 100%;
  height: 3000px;
  /* background: #333; */
  position: fixed;
  margin-top: -110px;
  z-index: 999;

  /* width: 100%;
  height: 3000px;
  /* background: #ccc; */
  /* position: fixed;
  z-index: 9999;
  margin-top: -500px;  */
}
.baogao {
  width: 100%;
  height: 100%;
  background: #333;
  opacity: 0.5;
}
</style>